<template>
  <view>
	 <view class="header">
		 <view class="image">
			 <image class="img" src="https://img0.baidu.com/it/u=3072405587,3514275905&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></image>
			 </view>
			 <view class="login" v-if="phone">{{phone}}</view>
			 <view  @click="login()" class="login" v-else>立即登录</view>
			 
		
	 </view> 
	  <view class="down" v-for="(item,index) in list" :key="index">
		  <view class="list" @click="page(item.id)">
			  <view class="ticket">{{item.name}}</view>
			  <view class="data">{{item.data}}</view>
		  </view>
	  </view>
		  <view class="list" @click="logout()" v-if="phone">
			  <view class="ticket">退出登录</view>
			  <!-- <view class="data"></view> -->
		  </view>
  </view>
</template>

<script>

export default {
  data(){
	  return{
		  list:[
			  {
				id:1,
				name:"电影票",
				data:"点击查看已购电影票"
			  },
			  {
			  	id:2,
			  	name:"优惠券",
			  	// data:"优惠券"
			  },
			  {
			  	id:3,
			  	name:"权益卡",
			  	data:""
			  },{
				id:4,
				name:"我的小食",
				data:""
			  },{
				id:5,
				name:"想看的电影",
				data:""
			  },{
				id:6,
				name:"看过的电影",
				data:""
			  },{
				id:7,
				name:"我的小剧场",
				data:""
			  },
		  ],
		  phone:''
	  }
  },
  onLoad(){
	  
  },
  onShow() {
  	if(uni.getStorageSync('phone')){
		this.phone=uni.getStorageSync('phone')
	}
  },
  methods: {
	 login(){
		 uni.navigateTo({
		 	url: "./login"
		 })
	 },
	 page(id){
		 // this.id=item.id
		 console.log(id)
		if(id==1){
			uni.navigateTo({
				url: "./ticket"
			})
		}else if(id==2){
			uni.navigateTo({
				url: "./ticket"
			})
		}else if(id==5){
			uni.navigateTo({
				url: "./want_movie"
			})
		}else if(id==6){
			uni.navigateTo({
				url: "./watched_movie"
			})
		}
	 },
	 logout(){
		 var that=this
		 uni.showModal({
			title: '提示',
			content: '是否确认取消登录',
		 	success:function(res){
				console.log(res)
				if (res.confirm) {
							that.phone=''
							uni.removeStorageSync('phone')
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
			}
		 })
		 
	 }
  },
  }
</script>

<style lang="scss" scoped>
.header{
	width:100%;
	height:150px;
	background:linear-gradient(to right,rgb(253,113,132),rgb(253,100,120));
	display: flex;
	align-items: center;
}
.image{
	width:80px;
	height:80px;
	background-color: white;
    border-radius: 50%;
	margin-left:35px;
}
.img{
	width:100%;
	height:100%;
	border-radius: 50%;
}
.login{
	font-size: 20px;
	color:white;
	margin-left:10px;
}
.popup{
	height:200px;
}
.list{
	width:92%;
	height:50px;
	border-bottom:1px #cecece solid;
	margin:0 auto;
	display: flex;
	align-items: center;
}
.ticket{
	margin-left:2px;
	width:67%;
	
}
.data{
	font-size: 10px;
	color:rgb(153,153,153);
	width:33%;
	float:right;
}
.phone{
	width:90%;
	margin:0 auto;
	position: relative;
	top:20px;
}
.password{
	width:90%;
	margin:0 auto;
	position: relative;
	top:40px;	
}
.button{
	width:90%;
	margin:0 auto;
	position: relative;
	top:60px;
}
</style>

